<template>
    <div class="header">
        <!-- 导航 -->
        <div class="nav">
            <router-link to="/home">发现</router-link>
            <router-link to="/singer">歌手</router-link>
            <router-link to="/songsheet">歌单</router-link>
            <router-link to="/mv">MV</router-link>
        </div>
    </div>
</template>

<script>
export default {
    
}
</script>

<style lang="less" scoped>

.header {
    position: relative;
    height: 70px;
    line-height: 70px;
    background: #fff;
    .nav {
        text-align: center;
        a {
            font-size: 18px;
            color: #5b534a;
            margin: 0 20px;
        }
    }

    .search {
        position: absolute;
        top: 50%;
        right: 300px;
        max-width: 100px;
        transform: translateY(-50%);
        border: 0;
        border-bottom: 1px solid #4a4a4a;
        outline: none;
        font-size: 16px;
        padding: 8px;
        text-align: center;
    }

    .tools {
        position: absolute;
        top: 50%;
        right: 100px;
        transform: translateY(-50%);
        a {
            font-size: 18px;
            color: #5b534a;
            margin: 0 20px;
        }
    }
    a:hover {
        color: #fc4158;
    }
}
</style>